<template>
  <u-navbar auto-back :title="getTitle()" bgColor="#fff"></u-navbar>
  <view class="con">
    <u-form labelPosition="left" :model="formData" label-width="88" :rules="rules" ref="form">
      <view class="commonBox">
        <u-form-item v-if="pageType === '1'" label="开始时间" prop="sendStartTime" borderBottom ref="item1" @click="dateShowFn('sendStartTime')">
          <u-input v-model="formData.sendStartTime" readonly border="none" placeholder="请选择开始时间" input-align="right">
            <template #suffix>
              <u-icon name="arrow-right" color="#d2c9cc"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item v-if="pageType === '1'" label="结束时间" prop="sendEndTime" ref="item1" @click="dateShowFn('sendEndTime')">
          <u-input v-model="formData.sendEndTime" border="none" readonly placeholder="请选择结束时间" input-align="right">
            <template #suffix> <u-icon name="arrow-right" color="#d2c9cc"></u-icon> </template>
          </u-input>
        </u-form-item>
        <u-form-item v-if="pageType === '2'" label="验证码" prop="code" ref="item1">
          <u-input v-model="formData.code" placeholder="输入验证码" border="bottom">
            <template #suffix>
              <u-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
              <u-button @tap="getCode" :text="tips" color="#1676fd" size="mini"></u-button>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item v-if="pageType === '2'" label="新密码" prop="payPassword" ref="item1">
          <u-input border="bottom" placeholder="请输入新密码" v-model="formData.payPassword" :password="isPass">
            <template #suffix>
              <u-icon name="eye-off" color="#bfbfbf" size="28" v-if="isPass" @click="isPass = false"></u-icon>
              <u-icon name="eye" color="#bfbfbf" size="28" v-else @click="isPass = true"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item v-if="pageType === '3'" label="姓名" prop="aliName" borderBottom ref="item1">
          <u-input v-model="formData.aliName" border="none" placeholder="请输入姓名" input-align="right"></u-input>
        </u-form-item>
        <u-form-item v-if="pageType === '3'" label="支付宝账号" prop="aliAccount" borderBottom ref="item1">
          <u-input v-model="formData.aliAccount" border="none" placeholder="请输入支付宝账号" input-align="right"></u-input>
        </u-form-item>
      </view>
      <u-datetime-picker :show="dateShow" mode="time" closeOnClickOverlay @confirm="dateComfirm" @cancel="dateShow = false" @close="dateShow = false"></u-datetime-picker>
    </u-form>
    <view class="buttomBox">
      <u-button @click="submit" shape="circle" text="提交" color="#1676fd"></u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { changeSendTime, sendCode, setAliAccount, setPayPassword } from "@/api/my";
import { onMounted, ref } from "vue";
//@ts-ignore
import { onShow } from "@dcloudio/uni-app";
const { pageType } = defineProps<{
  pageType: string;
}>();
onShow(() => {
  formData.value.aliAccount = uni.getStorageSync("userInfo").aliAccount;
  formData.value.aliName = uni.getStorageSync("userInfo").aliName;
});
const getTitle = () => {
  if (pageType === "1") {
    return "推送设置";
  } else if (pageType === "2") {
    return "修改支付密码";
  } else if (pageType === "3") {
    return "绑定支付宝";
  } else {
    return "修改";
  }
};
const isPass = ref(true);
const formData = ref({
  sendStartTime: "",
  sendEndTime: "",
  payPassword: "",
  aliName: "",
  aliAccount: "",
  code: "",
});
const dateShow = ref(false);
const showModal = ref(false);
const form = ref();
const rules = ref({
  aliName: {
    type: "string",
    required: true,
    message: "请填写支付宝姓名",
    trigger: ["change", "blur"],
  },
  aliAccount: {
    type: "string",
    required: true,
    message: "请填写支付宝账号",
    trigger: ["change", "blur"],
  },
  code: {
    type: "string",
    required: true,
    message: "请填写验证码",
    trigger: ["change", "blur"],
  },
  payPassword: {
    type: "string",
    required: true,
    message: "请填写新密码",
    trigger: ["change", "blur"],
  },
  sendStartTime: {
    type: "string",
    required: true,
    message: "请选择开始时间",
    trigger: ["change", "blur"],
  },
  sendEndTime: {
    type: "string",
    required: true,
    message: "请选择结束时间",
    trigger: ["change", "blur"],
  },
});
const dateComfirm = (e: any) => {
  console.log(e);
  dateShow.value = false;
  if (timeType.value === "sendStartTime") {
    formData.value.sendStartTime = e.value;
    form.value.validate("sendStartTime");
  } else {
    formData.value.sendEndTime = e.value;
    form.value.validate("sendEndTime");
  }
};
const timeType = ref("sendStartTime");
const dateShowFn = (e: string) => {
  dateShow.value = true;
  timeType.value = e;
};
const tips = ref("获取验证码");
const uCodeRef = ref<any>(null);
const codeChange = (text: string) => {
  tips.value = text;
};
const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    sendCode().then(() => {
      uni.hideLoading();
      // 这里此提示会被this.start()方法中的提示覆盖
      uni.showToast({
        title: "验证码已发送",
        icon: "none",
      });
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
    });
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "none",
    });
  }
};
const submit = async () => {
  form.value.validate().then(async () => {
    if (pageType === "1") {
      await changeSendTime(formData.value);
    } else if (pageType === "2") {
      await setPayPassword(formData.value);
    } else if (pageType === "3") {
      await setAliAccount(formData.value);
    }
    uni.showToast({
      title: "修改成功",
      icon: "success",
      complete() {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      },
    });
  });
};
</script>

<style lang="less" scoped>
.con {
  padding-top: 110rpx;
}
/deep/.u-input {
  padding: 14rpx 0px !important;
}
/deep/ .u-line {
  border-color: #f7f7f7 !important;
}
/deep/ .u-form-item__body__right__message {
  text-align: right !important;
}
</style>
